@mixin font-dpr($font-size) {
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}
body {
  margin: 0;
  //transition: all 1s;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
}
ul,
li {
  list-style: none;
  padding: 0;
}

.fd,.aic,.jcc,.jcb,.jca,.fdc,.jcfend{
  display: flex;
}
.aic{
align-items: center;
}
.jcc{
  justify-content: center;
}
.jcb{
  justify-content: space-between; 
}
.jca{
  justify-content: space-around; 
}
.jcfend{
  justify-content: flex-end 
}
.fdc{
  flex-direction: column;
}
.flex1{
  flex: 1;
}
.mx30{
  margin: 0 30px;
}
.mx15{
  margin: 0 15px;
}
.mx5{
  margin: 0 5px;
}
.mt30{
  margin-top:30px ;
}
.p10{
  padding: 10px;
}
.p20{
  padding: 20px;
}
